<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <!-- 移动端布局视口设置，如果开发移动端项目 一定要设置视口 -->
    <meta
      name="viewport"
      content="width=device-width, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0"
    />
    <!-- width:理想视口的意思，device-width：设备宽度的意思  -->
    <!-- width=device-width 理想视口就是设备视口 -->
    <title>Document</title>
    <style>
      html {
        /* font-size: 50px;
        font-size: 55.2px; */
        /* 动态设置html的font-size就可以了 */
        /* 100 / 设计稿的宽度 = ？/设备的宽度 */
      }
      .box {
        /* 100px = 1rem */

        /* 200px=2rem 转换为 100px 110.4px */
        /* 13px */
        width: 2rem;
        height: 2rem;
        font-size: 0.13rem;
        background-color: red;
      }
    </style>
  </head>
  <body>
    <div class="box">123123</div>
    <!-- 
        移动端的视口
            设备视口
            布局视口 
            理想视口
    -->

    <!-- 
    
        假设目前有一个设计稿  设计稿的宽度为750px  设计稿上有一个盒子 盒子宽度为100px   盒子占比100/750


        如果将100px写到布局页面上  占比是一样的

        eg:苹果六设备宽度为375px
                100/750 = ？50px/375px
        eg:苹果6p设备宽度为414px
                100/750 = ？55.2px/414px


        如何让100px自动根据设备的大小转换为50px 55px？？？？？
         rem可以解决这个事情
         rem：是根据html的font-size计算
    
    -->

    <script>
      // rem的逻辑  100 / 设计稿的宽度750px = ？/设备的宽度
      // ? = 设备宽度 * 100 / 750px设计稿
      // 如何获取设备的宽度
      //   console.log(document.documentElement.clientWidth);
      // 获取设备的宽度
      let width = document.documentElement.clientWidth;
      let index = (width * 100) / 750;
      //   index就是html的font-size
      document.documentElement.style.fontSize = index + 'px';
    </script>
  </body>
</html>
